<template>
  <el-dialog
      v-model="props.visible"
      class="legendDialog"
      title=""
      width="80%"
      fullscreen
      append-to-body
      :before-close="handleClose"
  >
    <div class="container">
      <div class="first">
        <h1>01 . 活动框</h1>
        <div class="center">
          <div class="content">
            <img src="/src/assets/images/first.png">
          </div>
          <div class="note">
            <p>一个活动一个框</p>
            <p><img src="/src/assets/images/share.png"> 每个框一个活动编号。如：001提出需求</p>
            <p><img src="/src/assets/images/share.png">  用动宾结构来描述活动。如：评估需求，制定方案。</p>
          </div>
        </div>
        <div class="bottom">
          <p>不同角色同时参与同一活动，对应活动框垂直对齐排列，使用同一编号；
          </p>
          <p> 不同活动同时进行，对应活动框垂直对齐排列，使用不同编号。</p>
        </div>
      </div>
      <div class="second">
        <h1>02 . 箭头和信息流</h1>
        <div class="center">
          <img src="/src/assets/images/two.png">
        </div>
        <div class="bottom">
          <p>箭头表示信息流的方向</p>
          <p><img src="/src/assets/images/share.png"> 每个活动都要至少拥有一个输入（除初始活动）和输出（除结束活动）</p>
          <p><img src="/src/assets/images/share.png"> 箭头方向只能从左向右（纵向无要求），不能从右向左逆时间流。</p>
        </div>
        <div class="bottom">
          <p>信息流表示过程文件</p>
          <p><img src="/src/assets/images/share.png"> 可选</p>
          <p><img src="/src/assets/images/share.png"> 文件编号+文件名称，如：010010《合同》</p>
        </div>
      </div>

      <div class="third">
        <h1>03 . 返工（循环）连接</h1>
        <div class="center">
          <img src="/src/assets/images/three.png">
        </div>
        <div class="bottom">
          <p>一对返工链接表示后一个活动返回到前一个活动</p>
          <p><img src="/src/assets/images/share.png"> 必须成对出现</p>
          <p><img src="/src/assets/images/share.png"> 置于前一个活动的左边，标记返工来源活动的编号;</p>
          <p><img src="/src/assets/images/share.png"> 置于后一个活动的右边，标记被返工去向活动的编号。</p>
        </div>
      </div>
      <div class="fourth">
        <h1>04 . 分支</h1>
        <div class="center">
          <div>
            <div class="title">
              <div class="serial-number">
                <span>1</span>
              </div>
              <span>与</span>
            </div>
            <img src="/src/assets/images/step-four-left.png">
          </div>
          <div>
            <div class="title">
              <div class="serial-number">
                <span>2</span>
              </div>
              <span>或</span>
            </div>
            <img src="/src/assets/images/step-four-right.png">
          </div>
        </div>
        <div class="bottom">
          <p>与：同一活动有多个后续活动。</p>
          <p>或：一个活动需在多个后续活动中依据判定条件选择其中一个。</p>
          <p>FF:结束时结束：FS:结束时开始（不常用）；</p>
          <p>SS:开始时开始；SF:开始时结束（不常用）.</p>
        </div>


      </div>
      <div class="fifth">
        <h1>05 . 注释</h1>
        <div class="center">
          <img src="/src/assets/images/five.png">
        </div>
        <div class="bottom">
          <p>问题活动：执行过程中问题高发的区域，一般指活动过程中的质量问题;</p>
          <p>关键路径：流程执行过程中卡点，一般指活动过程中的效率问题;</p>
          <p>重点监控：一般指活动过程中有硬性标准的需要遵守;</p>
          <p>*三者均为可选项，可不选或多选*</p>
        </div>
      </div>
    </div>

  </el-dialog>
</template>
<script setup>
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
})
const emit = defineEmits(['close'])
const handleClose = () => {
  emit('close')
}
</script>
<style lang="scss">
.legendDialog.el-dialog {
  background-color: #e6e6e6 !important;
}

.container {

  display: flex;
  flex-direction: column;
  align-items: center;
  color: #000;

  h1 {
    color: red;
    font-weight: 700;
  }




  .note {
    text-align: left;
    margin-left: 20px;
    font-weight: 600;
    font-size: 18px;
    img {
      width: 20px;
    }
  }


  .first {
    display: flex;
    flex-direction: column;

    .content {
      width: 300px;
      height: 180px;
      border-radius: 20px;
      background-color: #ffba55;
      text-align: center;

      p {
        font-size: 35px;
      }
    }
    .center {
      display: flex;

    }

    .content {
      img {
        width: 100%;
        height: 100%;
      }
    }
  }


  .third img {
    width: 100%;
  }
}

.fourth {
  .center {
    display: flex;
  }
}

.fourth .title {
  font-size: 18px;
  color: red;
  display: flex;
  font-weight: 700;
  align-items: center;
  margin-bottom: 10px;
  .serial-number {
    position: relative;
    width: 35px;
    height: 35px;
    border: 2px solid;
    border-radius: 50%;
    margin-right: 8px;
    span {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
    }
  }
}

.container > div {
  margin: 20px 0;
  background-color: #fff;
  width: 50%;
  padding: 20px 50px;
}

.center img {
  width: 100%;
}
.bottom {
  font-size: 18px;
  img {
    width: 15px !important;
  }
}
</style>